<template>
    <div class="wrapper">
        <navBarBlack></navBarBlack>
        <div class="content">
            <div style="width: 60%;margin: 50px auto;">
                <div style="text-align: center;">
                    <h3>需求列表</h3>
                    <el-text v-if="demandList.length === 0" size="large">您暂时未提交需求</el-text>
                </div>

                <demandInfo v-for="(item, index) in demandList" :key="index" :data="item"></demandInfo>

            </div>
        </div>
        <footBar></footBar>
    </div>
</template>

<script setup>
import demandInfo from '@/components/demandInfo/demandInfo.vue'
import navBarBlack from '@/components/navBar/navBarBlack.vue'
import footBar from '@/components/footBar/footBar.vue'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';
const proxy = getCurrentInstance().proxy

const demandList = ref([])

onMounted(async () => {
    const res = await proxy.$axios.get('/app/demand/info/getDemandByUserId')
    if (res.data.code === 1000) {
        demandList.value = res.data.data

    } else {
        ElMessage.error('获取需求列表失败')
        throw new Error(res.data.message)
    }
})

</script>

<style scoped>
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 页面高度 */
}

.content {
    flex: 1;
    /* 占据剩余的高度 */
}
</style>